<!DOCTYPE html>
<html>
<head>
	<title>resume</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href='http://cdn.webfont.youziku.com/webfonts/nomal/101914/45913/58ff703af629d819542adaaf.css' rel='stylesheet' type='text/css' />
	<link href='http://cdn.webfont.youziku.com/webfonts/nomal/101914/45802/58ff71c8f629d819542adab6.css' rel='stylesheet' type='text/css' />
	<link href="style/bootstrap.min.css" rel="stylesheet">
	<link href='http://cdn.webfont.youziku.com/webfonts/nomal/101914/45811/58ff73a2f629d819542adab9.css' rel='stylesheet' type='text/css' />
	<link href='http://cdn.webfont.youziku.com/webfonts/nomal/101914/45859/58ff7642f629d819542adabc.css' rel='stylesheet' type='text/css' />
	<link rel="stylesheet" type="text/css" href="font/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="style/index.css">
	<link rel="stylesheet" type="text/css" href="style/animation.css">
	<link rel="stylesheet" media="only screen and (max-width: 767px)" href="style/phone.css" />
	<script type="text/javascript" src="js/jquery.min.js"></script>	
	<script type="text/javascript" src="js/index.js"></script>
	<script type="text/javascript" src="js/phone.js"></script>
</head>
<body class="bg">
	<!-- 顶部导航 -->
	<div id="head">
		<div class="container">
			<div class="row">
				<div class="item col-md-3" index="2">
					<span class="icon"><i class="icon-user"></i></span>
					<a href="#info">个人简介</a>
				</div>
				<div class="item col-md-3" index="3">
					<span class="icon"><i class="icon-wrench"></i></span>
					<a href="#skill">掌握技能</a>
				</div>
				<div class="item col-md-3 item_pc" index="4">
					<span class="icon"><i class="icon-edit"></i></span>
					<a href="#works">作品展示</a>
				</div>
				<div class="item col-md-3 item_phone" index="4">
					<span class="icon"><i class="icon-edit"></i></span>
					<a href="#works_phone">作品展示</a>
				</div>
				<div class="item col-md-3" index="5">
					<span class="icon"><i class="icon-camera"></i></span>
					<a href="#experience">个人经历</a>
				</div>
			</div>
		</div>
	</div>

	<!-- 侧边栏 导航-->
	<div id="sidenav">
		<div class="item backindex" index="1">
			<span class="item_wrapper">
				<span class="icon"><i class="icon-file-alt"></i></span>
				<a href="#home">主页</a>
			</span>
		</div>	
		<div class="item" index="2">
			<span class="item_wrapper">			
				<span class="icon"><i class="icon-user"></i></span>
				<a href="#info">个人简介</a>
			</span>
		</div>
		<div class="item" index="3">
			<span class="item_wrapper">
				<span class="icon"><i class="icon-wrench"></i></span>
				<a href="#skill">掌握技能</a>
			</span>
		</div>
		<div class="item" index="4">
			<span class="item_wrapper">
				<span class="icon"><i class="icon-edit"></i></span>
				<a href="#works">作品展示</a>
			</span>
		</div>
		<div class="item">
			<span class="item_wrapper" index="5">
				<span class="icon"><i class="icon-camera"></i></span>
				<a href="#experience">个人经历</a>
			</span>
		</div>		
	</div>

	<div class="wrapper height_all">
		<div id="home" class="height_all" page="1">
			<div class="container height_all flex_lay flex-v flex-pack-center">
				<div class="img_myPhoto"></div>
				<h2 class="cssa4af7ab4a18e1a">兴趣是最好的导师，他会让我们对待一件事情更加投入和执着。</h2>
				<p class="cssa4afdbf6118e1a">我叫徐勇</p>
				<p class="cssa4afdbf6118e1a">一名以兴趣为驱动的前端程序猿</p>
				<p class="cssa4afdbf6118e1a">18130601035</p>
			</div>
		</div>


		<!-- 简介 -->
		<div id="info" class="height_all" page="2">
			<div class="container height_all">
				<div class="title height_10 flex_lay flex-pack-center"><h2>个人简介</h2></div>
				<div class="row height_90 cssa4b04fb5f18e1a font_sz">
					<div class="col-md-4 col-sm-4 col-md-offset-1 col-sm-offset-1 summary margin_x_10">
						<div class="myPhoto m_20"></div>
						<p>Web前端</p>
						<p>意向城市：上海</p>
						<h3>爱好：</h3>
						<p>运动 、游戏（戒了）、看书</p>
						<h3>自我感觉：</h3>
						<p>性格随和，长得帅，脾气好。</p>
						<p>态度端正，积极进取。对新事物充满好奇，富有挑战精神。</p>
						<p>生性执着，对自己想要完成的事情，不轻言放弃。</p>
					</div>
					<div class="col-md-7 col-sm-7 detail margin_x_10 height_85">
						<h2 class="height_10 flex_lay">基本信息</h2>
						<ul class="height_90">
							<li class="flex_lay"><span class="title">姓名：</span>徐勇</li>
							<li class="flex_lay"><span class="title">出生日期：</span>92.11.17</li>
							<li class="flex_lay"><span class="title">学历：</span>本科</li>
							<li class="flex_lay"><span class="title">毕业时间：</span>2015/9</li>
							<li class="flex_lay"><span class="title">电话：</span>18130601035</li>
							<li class="flex_lay"><span class="title">获得殊荣：</span>2015年度公司总部优秀员工</li>
							<li class="flex_lay"><span class="title">目前状态：</span>离职</li>
							<li class="flex_lay"><span class="title">期望工作：</span>web前端</li>
							<li class="flex_lay"><span class="title">到岗时间：</span>1个月内</li>
						</ul>
					</div>
					
				</div>			
			</div>
		</div>

		<!-- 技能 -->		 
		<div id="skill" class="height_all" page="3">
			<div class="container height_all">
				<div class="title height_10 flex_lay flex-pack-center"><h2>专业技能</h2></div>
				<div class="row height_90">
					<div class="col-md-4 col-sm-4 item height_50">
						<div class="wrap">
							<h3>
								<p>HTML</p>
								<span class="dot1"></span>
								<span class="dot2"></span>
								<span class="dot3"></span>
								<i class="icon-reply"></i>
								<i class="icon-circle-blank"></i>
								<i class="icon-sign-blank"></i>
							</h3>	
						</div>
						<div class="skill_detail">
							<p>熟练使用html标签</p>
							<p>熟练运用div+css布局</p>
						</div>
					</div>
					<div class="col-md-4 col-sm-4 item height_50">
						<div class="wrap">
							<h3>
								<p>css</p>
								<span class="dot1"></span>
								<span class="dot2"></span>
								<span class="dot3"></span>
								<i class="icon-reply"></i>
								<i class="icon-circle-blank"></i>
								<i class="icon-sign-blank"></i>
							</h3>	
						</div>
						<div class="skill_detail">
							<p>精通css</p>
							<p>熟悉bootstrap</p>
							<p>对响应式布局与自适应布局有一定的理解</p>
						</div>	
					</div>
					<div class="col-md-4 col-sm-4 item height_50">
						<div class="wrap">
							<h3>
								<p>JS</p>
								<span class="dot1"></span>
								<span class="dot2"></span>
								<span class="dot3"></span>
								<i class="icon-reply"></i>
								<i class="icon-circle-blank"></i>
								<i class="icon-sign-blank"></i>
							</h3>	
						</div>
						<div class="skill_detail">
							<p>熟悉js的基本语法</p>
							<p>熟悉jquery</p>
							<p>对面向对象有一定的理解</p>
						</div>	
					</div>
					<div class="col-md-4 col-sm-4 item height_50">
						<div class="wrap">
							<h3>
								<p>nodejs</p>
								<span class="dot1"></span>
								<span class="dot2"></span>
								<span class="dot3"></span>
								<i class="icon-reply"></i>
								<i class="icon-circle-blank"></i>
								<i class="icon-sign-blank"></i>
							</h3>	
						</div>
						<div class="skill_detail">
							<p>了解nodejs以及express</p>
						</div>	
					</div>
					<div class="col-md-4 col-sm-4 item height_50">
						<div class="wrap">
							<h3>
								<p>mysql</p>
								<span class="dot1"></span>
								<span class="dot2"></span>
								<span class="dot3"></span>
								<i class="icon-reply"></i>
								<i class="icon-circle-blank"></i>
								<i class="icon-sign-blank"></i>
							</h3>	
						</div>
						<div class="skill_detail">
							<p>对mysql有基础的了解</p>
							<p>熟悉增删改查的语句</p>
						</div>	
					</div>
					<div class="col-md-4 col-sm-4 item height_50">
						<div class="wrap">
							<h3>
								<p>vue</p>
								<span class="dot1"></span>
								<span class="dot2"></span>
								<span class="dot3"></span>
								<i class="icon-reply"></i>
								<i class="icon-circle-blank"></i>
								<i class="icon-sign-blank"></i>
							</h3>	
						</div>
						<div class="skill_detail">
							<p>对mvvm模式有基本的了解</p>
							<p>了解vue项目的搭建以及基本的语法</p>
						</div>	
					</div>
				</div>
			</div>
		</div>
		<!-- 作品展示 -->
		<div id="works" class="height_all" page="4">
			<div class="container height_all">
				<div class="title height_10 flex_lay flex-pack-center"><h2>作品展示</h2></div>
				<table class="table table-hover">
					<tr class="cssa4b0f3bf118e1a">
						<th>项目名称</th>
						<th>项目描述</th>
						<th>项目地址</th>
					</tr>
					<tr>
						<td>切图</td>
						<td>使用html、css、js实现100%还原设计图的静态页面，使用div+css的布局</td>
						<td>
							<a href="http://xywait.oschina.io/health">养生堂：http://xywait.oschina.io/health</a><br/>
							<a href="http://xywait.oschina.io/food/">滋益堂：http://xywait.oschina.io/food</a><br/>
							<a href="http://xywait.oschina.io/binghu/">中海滨湖：http://xywait.oschina.io/binghu</a><br/>
							<a href="http://xywait.oschina.io/vancl">凡客首页：http://xywait.oschina.io/vancl</a>
						</td>
					</tr>
					<tr>
						<td>机友汇</td>
						<td>运用nodejs和express框架搭建的一个功能类似博客的应用，后台可以登录、登出，以及对前台数据的添加及修改，数据信息通过MySQL获取。
						</td>
						<td>
							<a href="http://xycool.info:3003">机友汇：xycool.info:3003</a>
						</td>
					</tr>
					<tr>
						<td>鲜花网</td>
						<td>运用nodejs和express框架搭建的一个商城类网站，使用了bootstrap。实现了简单的响应式和自适应的布局。
						</td>
						<td>
							<a href="http://xycool.info:3000">鲜花网：xycool.info:3000</a>
						</td>
					</tr>
					<tr>
						<td>狗眼电影</td>
						<td>这是一个基于vue制作的在线电影影讯网站，利用豆瓣api的接口获取数据，模仿猫眼电影制作的webapp，实现了当前热映电影，即将上映电影，电影详细信息，短评和长评论信息，影星个人信息。
						</td>
						<td>
							<a href="http://xycool.info:8081">狗眼电影：xycool.info:8081</a>
						</td>
					</tr>
				</table>
			</div>
		</div>

		<!-- 手机端作品展示 -->
		<div id="works_phone" class="height_all" page="4">
			<div class="container height_all">
				<div class="title height_10 flex_lay flex-pack-center"><h2>作品展示</h2></div>
				<ul class="flex_lay flex-v flex-pack-center">
					<li class="title cssa4b0f3bf118e1a">项目名称</li>
					<li class="content">切图</li>	
					<li class="title cssa4b0f3bf118e1a">项目描述</li>
					<li class="content">使用html、css、js实现100%还原设计图的静态页面，使用div+css的布局</li>
					<li class="title cssa4b0f3bf118e1a">项目地址</li>
					<li class="content">
						<a href="http://xywait.oschina.io/health">养生堂：http://xywait.oschina.io/health</a><br/>
						<a href="http://xywait.oschina.io/food/">滋益堂：http://xywait.oschina.io/food</a><br/>
						<a href="http://xywait.oschina.io/binghu/">中海滨湖：http://xywait.oschina.io/binghu</a><br/>
						<a href="http://xywait.oschina.io/vancl">凡客首页：http://xywait.oschina.io/vancl</a>
					</li>
				</ul>																	
				<ul class="flex_lay flex-v flex-pack-center">
					<li class="title cssa4b0f3bf118e1a">项目名称</li>
					<li class="content">机友汇</li>
					<li class="title cssa4b0f3bf118e1a">项目描述</li>
					<li class="content">运用nodejs和express框架搭建的一个功能类似博客的应用，后台可以登录、登出，以及对前台数据的添加及修改，数据信息通过MySQL获取。
					</li>
					<li class="title cssa4b0f3bf118e1a">项目地址</li>
					<li class="content">
						<a href="http://xycool.info:3003">机友汇：xycool.info:3003</a>
					</li>
				</ul>
				<ul class="flex_lay flex-v flex-pack-center">
					<li class="title cssa4b0f3bf118e1a">项目名称</li>
					<li class="content">鲜花网</li>
					<li class="title cssa4b0f3bf118e1a">项目描述</li>
					<li class="content">运用nodejs和express框架搭建的一个商城类网站，使用了bootstrap。实现了简单的响应式和自适应的布局。
					</li>
					<li class="title cssa4b0f3bf118e1a">项目地址</li>
					<li class="content">
						<a href="http://xycool.info:3000">鲜花网：xycool.info:3000</a>
					</li>
				</ul>
				<ul class="flex_lay flex-v flex-pack-center">
					<li class="title cssa4b0f3bf118e1a">项目名称</li>
					<li class="content">狗眼电影</li>
					<li class="title cssa4b0f3bf118e1a">项目描述</li>
					<li class="content">这是一个基于vue制作的在线电影影讯网站，利用豆瓣api的接口获取数据，模仿猫眼电影制作的webapp，实现了当前热映电影，即将上映电影，电影详细信息，短评和长评论信息，影星个人信息。
					</li>
					<li class="title cssa4b0f3bf118e1a">项目地址</li>
					<li class="content">
						<a href="http://xycool.info:8081">狗眼电影：xycool.info:8081</a>
					</li>
				</ul>
			
			</div>
		</div>


		<!-- 个人经历 -->
		<div id="experience" class="height_all" page="5">
			<div class="container height_all">
				<div class="title height_10 flex_lay flex-pack-center"><h2>个人经历</h2></div>
				<div class="row all height_90">
					<div class="col-md-8 step height_30 flex_lay">
		
						<div class="detail flex-size"  style="padding: 29px 0">
							<h3 class="cssa4b0f3bf118e1a">新安人才网</h3>
							<p>在这期间对前端有了更加深入的理解</p>
							<p>能够完成一些项目的开发</p>
						</div>
						<div class="middle flex-size flex-v">
							<div class="time flex_lay">
								<p class="flex-size">2016/12</p>
								<p class="flex-size line">--</p>
								<p class="flex-size">2017/4</p>
							</div>
						</div>
		
					</div>
					<div class="clr"></div>
					<div class="col-md-8 col-md-offset-4 step height_30 flex_lay">
		
						<div class="middle flex-size">
							<div class="time flex_lay flex-v">
								<p class="flex-size">2015/5</p>
								<p class="flex-size line">--</p>
								<p class="flex-size">2016/10</p>
							</div>
						</div>
		
						<div class="detail flex-size" style="text-align: left;">
							<h3 class="cssa4b0f3bf118e1a">中世国际物流公司</h3>
							<p>大学毕业之后的第一家公司</p>
							<p>也是在这期间踏进了前端的不归路</p>
							<p>在业余时间学习PS的过程中了解了前端</p>
							<p>在探索前端的过程中让我注意力</p>
						</div>
		
					</div>
					<div class="clr"></div>
					<div class="col-md-8 step height_30 flex_lay">
		
						<div class="detail flex-size"  style="padding: 50px 0;">
							<h3 class="cssa4b0f3bf118e1a">安徽大学江淮学院</h3>
							<p>大学本科</p>
						</div>
		
						<div class="middle flex-size">
							<div class="time flex_lay flex-v">
								<p class="flex-size">2011/9</p>
								<p class="flex-size line">--</p>
								<p class="flex-size">2015/7</p>
							</div>
						</div>
		
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>